{extend name="public/base"}
{block name='main'}
<script type="text/javascript" src="__PUBLIC__/admin/layui/layui.js"></script>
<blockquote class="layui-elem-quote">
    <b>{$addon.tips.title|default=''}</b><br>
    {$addon.tips.value|default=''}
</blockquote>

<form action="{:url('config')}" class="layui-form" method="post">
      {empty name="custom_config"}
      {foreach name="$addon.config" id="config" key="o_key"}
        <div class="layui-form-item">
        {notempty name="config.title"}
        <label class="layui-form-label">{$config.title|default=''}</label>
        {/notempty}
        {switch name="config.type"}
        {case value="bool"}
        <div class="layui-input-block w500" >
            <input  type="checkbox"  name="switch_config[{$config.name}]" lay-skin="switch" lay-filter="switchBool" lay-text="启用|禁止"  {eq name="$config.value" value="1"} checked=""{/eq}>
            <input  type="hidden" id="switch_config[{$config.name}]" name="config[{$config.name}]" value="{$config.value}">
        </div>
        {/case}
        {case value="text"}
        <div class="layui-input-block w500 ">
          <input type="text" name="config[{$config.name}]" value="{$config.value}" class="layui-input">
          {notempty name="config.tip"}
          <div class="layui-form-mid layui-word-aux">{$config.tip}</div>
          {/notempty}
        </div>
        {/case}
        {case value="password"}
        <div class="layui-input-block w500 ">
          <input type="password" name="config[{$config.name}]" value="{$config.value}" class="layui-input">
          {notempty name="config.tip"}
          <div class="layui-form-mid layui-word-aux">{$config.tip}</div>
          {/notempty}
        </div>
        {/case}
            {case value="number"}
            <div class="layui-input-block w500 ">
                <input type="number" name="config[{$config.name}]" value="{$config.value}" class="layui-input">
                {notempty name="config.tip"}
                <div class="layui-form-mid layui-word-aux">{$config.tip}</div>
                {/notempty}
            </div>
            {/case}
            {case value="datetime"}
            <div class="layui-input-block w500 ">
                <input type="text" name="config[{$config.name}]"  value="{$config.value}" id="date"  placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                {notempty name="config.tip"}
                <div class="layui-form-mid layui-word-aux">{$config.tip}</div>
                {/notempty}
            </div>
            {/case}
        {case value="radio"}
        <div class="layui-input-block w500">
          {foreach name="config['content']" key="opt_k" item="vo"}
          <input type="radio" name="config[{$config.name}]" value="{$opt_k}" title="{$vo}" {eq name="config.value" value="$opt_k"} checked{/eq}>
          {/foreach}
          {notempty name="config.tip"}
          <div class="layui-form-mid layui-word-aux">{$config.tip}</div>
          {/notempty}
        </div>
        {/case}
        {case value="checkbox"}
        <div class="layui-input-block w500">
          {foreach name="config['content']" key="opt_k" item="vo"}
            <input type="checkbox" name="config[{$config.name}][{$opt_k}]" value="{$opt_k}" title="{$vo}"  {in name="$opt_k" value="$config.value" }checked{/in}>
          {/foreach}
          {notempty name="config.tip"}
          <div class="layui-form-mid layui-word-aux">{$config.tip}</div>
          {/notempty}
        </div>
        {/case}

      {case value="select"}
      <div class="layui-input-inline">
        <select name="config[{$config.name}]">
          {foreach name="config['content']" key="opt_k" item="vo"}
          <option value="{$opt_k}" {eq name="config.value" value="$opt_k"}selected{/eq}>{$vo}</option>
          {/foreach}
        </select>
      </div>
      {notempty name="config.tip"}
      <div class="layui-form-mid layui-word-aux">{$config.tip}</div>
      {/notempty}
      {/case}

      {case value="textarea"}
      <div class="layui-input-block">
        <textarea name="config[{$config.name}]" class="layui-textarea">{$config.value}</textarea>
        {notempty name="config.tip"}
        <div class="layui-form-mid layui-word-aux">{$config.tip}</div>
        {/notempty}
      </div>
      {/case}

      {case value="hidden"}
      <input type="hidden" name="config[{$config.name}]" value="{$config.value}">
      {/case}

        {case value="images"}
        <div class="layui-input-block w500">
          <div class="input-group">
            <input type="text" size="52" id="img_config[{$o_key}]" name="config[{$config.name}]" value="{$config.value}" class="layui-input">
            <button class="layui-btn" id="img_upload_{$o_key}" type="button">上传图片</button>
          </div>
        </div>
        {notempty name="config.tip"}
        <div class="layui-form-mid layui-word-aux">{$config.tip}</div>
        {/notempty}
        <script type="text/javascript">
          layui.use(['layer','upload','jquery'], function(){
            var layer = layui.layer;
            var upload = layui.upload;
            var uploadInst = upload.render({
              elem: '#img_upload_{$o_key}' //绑定元素
              ,url: '{:url('plugin/ajax_upload')}' //上传接口
                    ,data: {path:'addon_img'}
          ,done: function(data){
              if(data.code){
                layer.msg(data.msg, {icon: 1,shade: 0.3,time: 2000},function(layero, index){
                    layui.$('[id="img_config[{$o_key}]"]').val(data.path);
                });
              }else{
                layer.msg(data.msg, {icon: 0,shade: 0.3});
              }
            }
          ,error: function(){
              //请求异常回调
            }
          });
          });
        </script>
        {/case}
            {case value="files"}
            <div class="layui-input-block w500">
                <div class="input-group">
                    <input type="text" size="52" id="file_config[{$o_key}]" name="config[{$config.name}]" value="{$config.value}" class="layui-input">
                    <button class="layui-btn" id="file_upload_{$o_key}" type="button">上传文件</button>
                </div>
            </div>
            {notempty name="config.tip"}
            <div class="layui-form-mid layui-word-aux">{$config.tip}</div>
            {/notempty}
            <script type="text/javascript">
                layui.use(['layer','upload','jquery'], function(){
                    var layer = layui.layer;
                    var upload = layui.upload;
                    var uploadInst = upload.render({
                        elem: '#file_upload_{$o_key}' //绑定元素
                        ,url: '{:url('plugin/ajax_upload')}' //上传接口
                        ,accept:'file'
                        ,data: {path:'addon_file'}
                ,done: function(data){
                        if(data.code){
                            layer.msg(data.msg, {icon: 1,shade: 0.3,time: 2000},function(layero, index){
                                layui.$('[id="file_config[{$o_key}]"]').val(data.path);
                            });
                        }else{
                            layer.msg(data.msg, {icon: 0,shade: 0.3});
                        }
                    }
                ,error: function(){
                        //请求异常回调
                    }
                });
                });
            </script>
            {/case}

      {/switch}
  </div>
  {/foreach}
  {else/}
  {//$custom_config}
  {/empty}

  <div class="layui-form-item">
    <label class=""></label>
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit="" lay-filter="content_edit">提交保存</button>
    </div>
  </div>
</form>

<script>
  layui.use(['layer','jquery','form','element','layedit'], function () {
    //参数：layui、名称、更新的formid、更新的url：module/method、更新后跳转的url（为空则不跳转）、编辑器id、标签id（为空则不获取）
    Oper.initUpdate(layui, '导航', 'content_edit', 'nav/add');
  });
</script>
<script>
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            title: function(value){
                if(value.length < 5){
                    return '标题至少得5个字符啊';
                }
            }
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
            ,content: function(value){
                layedit.sync(editIndex);
            }
        });

        //监听指定开关
        form.on('switch(switchBool)', function(data){
            layui.$('[id="'+this.name+'"]').val(this.checked ? '1' : '0')
        });

        //监听提交
        form.on('submit(demo1)', function(data){
            layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            })
            return false;
        });



        //表单取值
        layui.$('#LAY-component-form-getval').on('click', function(){
            var data = form.val('example');
            alert(JSON.stringify(data));
        });

    });
</script>
{/block}